<template>
  <!-- 商品详情页中的swiper部分 -->
  <div class="wrapper">
     <p class="iconfont backBtn" @click="bakClick">&#xe624;</p>
    <swiper>
      <swiper-item v-for="(item,index) in swiper" :key="index">
        <img :src="item" alt="">
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import {Swiper, SwiperItem} from "components/common/swiper";
export default {
  naem: 'swiper',
  components: {
    Swiper, 
    SwiperItem
  },
  data () {
    return {
      swiper:[
         require("../../../assets/images/home/swiper-item.png"),
         require("../../../assets/images/home/swiper-item.png"),
         require("../../../assets/images/home/swiper-item.png")
        ]
    }
  },
  methods: {
    bakClick () {
      this.$router.push("/home");
    }
  }
};
</script>

<style lang="less" scoped>
.wrapper /deep/ .swiper-pagination-bullet-active {
  background: red;
}
.wrapper /deep/ .swiper-pagination-bullets span {
  float: right;
}
.wrapper /deep/ .swiper-pagination-bullets span {
  float: right;
  &:first-child {
    margin-right: 0.24rem;
  }
}

.wrapper {
  position: relative;
    overflow: hidden;
    width: 3.75rem;
    background: #eee;
    .swiper-img {
      width: 100%;
    }
    .backBtn {
      position: absolute;
      z-index: 9;
      left: .15rem;
      top:.3rem
    }
  }
</style>